﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="/js/header.js"></script>
    <link href="/lib/ztree/ztreestyle.css" rel="stylesheet" />
    <link href="/lib/icheck/skins/all.css" rel="stylesheet" />
    <script type="text/javascript" src="/lib/ztree/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="/lib/icheck/icheck-init.js"></script>
    <script type="text/javascript" src="/lib/icheck/jquery.icheck.js"></script>
</head>
<body style="background-color: white;">
    <section class="container-fluid" style="background-color: white;">
        <div class="panel-default">

            <ul class="nav nav-tabs m15_t" id="myTab">
                <li class="active"><a href="#basicInfo" data-toggle="tab">基本信息</a></li>
                <li><a href="#permissions" data-toggle="tab">菜单权限</a></li>
            </ul>

            <div class="panel-body">
                <form id="form">
                    <div class="tab-content">

                        <input type="hidden" name="id" />
                        <input type="hidden" name="mParent" />

                        <div class="form-horizontal tab-pane fade in active" id="basicInfo">
                            <div class="form-group">
                                <label class="wd100 control-label"><span class="WdateFmtErr">*</span>菜单名称：</label>
                                <div class="wd250 m15_l">
                                    <input class="form-control" type="text" name="mName" maxlength="40" autocomplete="off" placeholder="长度必须介于 3 和 40 之间">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd100 control-label">父级菜单：</label>
                                <div class="wd250 m15_l">
                                    <select class="form-control input-sm wd240" name="ParentId" style="display: inline-block; width: auto;" disabled>
                                        <option value="0">根目录</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd100 control-label">菜单地址：</label>
                                <div class="wd250 m15_l">
                                    <input class="form-control wd240" type="text" name="mUrl" maxlength="120" autocomplete="off" placeholder="长度不能超过120位" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd100 control-label"><span class="WdateFmtErr">*</span>順序：</label>
                                <div class="wd250 m15_l">
                                    <input class="form-control wd240" type="text" name="sortNo" maxlength="4" autocomplete="off" placeholder="只能为正整数" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="wd100 control-label">启用：</label>
                                <div class="wd250 m15_l">
                                    <div class="icheck ">
                                        <div class="flat-red single-row">
                                            <div class="radio ">
                                                <input type="checkbox" name="hide" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="permissions">
                            <div class="form-group">
                                <div class="panel-default">
                                    <a id="selectPermission" class="btn btn-default" data-href="/view/menu/menupermission.html" data-title="新增" data-width="500" data-height="515"><span class="glyphicon glyphicon-plus"></span> 新增</a>
                                </div>
                                <div class="table-responsive m5_t" style="overflow-y:auto;height:310px;">
                                    <table class="table table-hover privileges menuPermissions">
                                        <thead>
                                            <tr>
                                                <th class="t_l">权限名称</th>
                                                <th class="t_l" width="wd150">权限代码</th>
                                                <th class="t_c wd75">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="noRecord">
                                                <td colspan="4">暂无记录！</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <script type="text/x-dot-template" id="menuPermissionTpl">
        {{? it && it.length>0}}
        {{ for(var prop in it) { }}
        <tr>
            <td class="t_l">
                <input style="display: none" name="permissionId" type="checkbox" value="{{=it[prop]['pid']}}">
                {{=it[prop]['pName']}}
            </td>
            <td class="t_l wd150">{{=it[prop]['pCode']}}</td>
            <td class="t_c wd75"><button type="button" class="btn btn-danger" onclick=" removeRow(this) "><span class="glyphicon glyphicon-trash"></span> 删除</button></td>
        </tr>
        {{ } }}
        {{??}}
        <tr class="noRecord">
            <td colspan="4">暂无记录！</td>
        </tr>
        {{?}}
    </script>
    <script type="text/x-dot-template" id="noRecordTpl">
        <tr class="noRecord">
            <td colspan="4">暂无记录！</td>
        </tr>
    </script>
    <script type="text/javascript">
        //菜单状态
        var menuStatus =
            {
                show: 1,
                hide: 2
            };

        var validator = null;

        var mParent = $("select[name='ParentId']");

        function insertRow(obj) {

            var menuPermissionText = doT.template($("#menuPermissionTpl").text());

            $("table.menuPermissions > tbody > tr.noRecord").remove();

            $("table.menuPermissions tbody").append(menuPermissionText(obj));
        }

        function removeRow(obj) {

            var length = $("table.menuPermissions > tbody > tr").length;

            $(obj).parent().parent().remove();

            if (length == 1) {
                var noRecordText = doT.template($("#noRecordTpl").text());
                $("table.menuPermissions tbody").append(noRecordText());
            }

        }

        function init(id) {
            var cover = FlashPay.UI.Mask({
                obj: $("body"),
                opacity: 0.5
            });

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Menu/GetMenuNode/" + id,
                data: null,
                success: function (response) {
                    if (response.success) {

                        FlashPay.Util.SetInputVal("id", response.data.mid);
                        FlashPay.Util.SetInputVal("mName", response.data.mName);
                        FlashPay.Util.SetInputVal("mParent", response.data.mParent);
                        $("select[name='ParentId']").val(response.data.mParent);
                        FlashPay.Util.SetInputVal("mUrl", response.data.mUrl);
                        FlashPay.Util.SetInputVal("sortNo", response.data.sortNo);

                        $("input[name='hide']").iCheck(response.data.hide == menuStatus.show ? "check" : "uncheck");

                        $("select[name='mParent']").attr("disabled", true)

                        var menuPermissionText = doT.template($("#menuPermissionTpl").text());

                        $("table tbody").html(menuPermissionText(response.data.permissionResponse));

                        cover.Remove();
                    } else {
                        cover.Remove();
                    }
                },
                error: function (e) {
                    cover.Remove();
                    FlashPay.UI.Tip_short_warning("操作失败！请查看网络，请重试。");
                }
            });
        }

        $(function () {

            var id = FlashPay.Util.GetQueryString("id");

            init(id);

            //表单验证初始配置
            validator = FlashPay.Util.Validator({
                formObj: $("#form"),
                rules: {
                    mName: {
                        required: true,
                        rangelength: [3, 40]
                    },
                    sortNo: {
                        required: true,
                        IsPositiveInteger: true
                    }
                },
                messages: {
                    mName: {
                        required: "长度必须介于 3 和 40 之间",
                        rangelength: "长度必须介于 3 和 40 之间",
                    },
                    sortNo: {
                        required: "只能为正整数",
                        rangelength: "只能为正整数",
                    }
                }
            });

            $("a#selectPermission").click(function () {

                var modal = $(this);
                var url = modal.data("href");
                var menuSysNo = $("input[name='id']").val();
                if (FlashPay.Util.isNullOrEmptySpance(menuSysNo)) {
                    FlashPay.UI.Tip_warning("请选择添加权限的菜单项！");
                    return;
                }
                url += "?menuSysNo=" + menuSysNo + "&" + Math.random();

                FlashPay.UI.DialogOpen(url, {
                    title: modal.data("title"),
                    width: modal.data("width"),
                    height: modal.data("height"),
                    init: function () {
                        this.button(
                            {
                                name: '关闭'
                            }
                        );
                    },
                });
            });

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Menu/GetZtreeNodes",
                data: null,
                dataType: "json",
                success: function (response) {
                    if (response != null && response.success) {

                        mParent.empty();
                        mParent.append("<option value='0'>根目录</option>");

                        $.each(response.data, function (i, item) {
                            mParent.append("<option value='" + item.id + "'>" + item.name + "</option >");
                        });

                        if (id != null) {
                            $("select[name='mParent']").val(id);
                        }
                    } else {

                    }
                },
                error: function (e) {
                    FlashPay.UI.Tip_danger("网络请求失败！");
                }
            });
        });

        //获取根节点
        function menuRootNodes(id) {

            FlashPay.Util.Ajax({
                type: "POST",
                url: "/Menu/GetZtreeNodes",
                data: { id: 0 },
                dataType: "json",
                success: function (response) {
                    if (response != null && response.success) {

                        mParent.empty();
                        mParent.append("<option value='0'>根目录</option>");

                        $.each(response.data, function (i, item) {
                            mParent.append("<option value='" + item.id + "'>" + item.name + "</option >");
                        });

                        if (id != null) {
                            $("select[name='mParent']").val(id);
                        }
                    } else {

                    }
                },
                error: function (e) {
                    FlashPay.UI.Tip_danger("网络请求失败！");
                }
            });
        }

        function save() {
            //交叉自定义验证
            if (!validator.form()) {
                return false;
            }

            var menu = {};
            menu.mid = $("input[name='id']").val();
            menu.mName = $("input[name='mName']").val();
            menu.mParent = $("input[name='mParent']").val();
            menu.mUrl = $("input[name='mUrl']").val();
            menu.nodeType = 0;
            menu.sortNo = $("input[name='sortNo']").val();
            menu.mType = FlashPay.Util.Platform;
            menu.hide = $("input[name='hide']").prop('checked') ? menuStatus.show : menuStatus.hide;

            var privileges = [];
            $("table.privileges > tbody > tr").each(function (index) {
                var permissionId = $(this).find("input[name='permissionId']").val();
                if (permissionId != null)
                    privileges.push(permissionId);
            });

            FlashPay.Util.Ajax({
                url: "/menu/saveMenu",
                type: 'POST',
                data: { menu: menu, privileges: privileges },
                success: function (response) {
                    if (response != null && response.success) {
                        FlashPay.UI.DialogOpener().Tip_success("操作成功！");
                        FlashPay.UI.DialogOpener().reload();
                        FlashPay.UI.CloseDialog();
                        //var ztree = $.fn.zTree.getZTreeObj("ztree");
                        //ztree.setting.async.enable = true;

                        //if (selectedNode && selectedNode.parentTId != null && parseInt(selectedNode.pId) === parseInt(menu.mParent)) {
                        //    ztree.reAsyncChildNodes(ztree.getNodeByTId(selectedNode.parentTId), "refresh", true);
                        //} else {
                        //    var node = ztree.getNodeByParam("id", 0, null);

                        //    ztree.reAsyncChildNodes(node, "refresh", true);
                        //}
                    } else {
                        FlashPay.UI.Tip_short_warning(response.errorMessage);
                    }
                },
                error: function (e) {
                    FlashPay.UI.Tip_danger("网络请求失败！");
                }
            });
        }
    </script>
</body>
</html>